<template>
  <Card size="small" class="logs-card">
    <template #title>
      <Row :gutter="10">
        <Col :span="3">
          <Select v-model:value="so.level" style="width: 100%">
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="DEBUG">调试</Select.Option>
            <Select.Option value="INFO">信息</Select.Option>
            <Select.Option value="ERROR">错误</Select.Option>
          </Select>
        </Col>
        <Col :span="7">
          <Input v-model:value="so.keywords" placeholder="消息关键字" style="width: 100%" />
        </Col>
        <Col class="btn-group">
          <Button type="primary" shape="round" @click="onPaged"><SearchOutlined /> 查询</Button>
          <Button @click="onReset"><RestOutlined /> 重置</Button>
        </Col>
      </Row>
    </template>
    <template #extra>
      <Button shape="round" type="primary" danger @click="onClear"><ClearOutlined /> 清空</Button>
    </template>

    <Table :rowKey="getRowKey" :columns="columns" :data-source="logs" @resizeColumn="resizeColumn" :scroll="{ x: 500, y: tableHeight }" :pagination="pagerOption" @change="onPaged" size="small" bordered> </Table>
  </Card>
</template>
<script setup>
  import { useStore } from 'vuex';
  import { ref, reactive, computed, inject, onMounted } from 'vue';
  import { Card, Button, Row, Col, Select, Input, Table } from 'ant-design-vue';
  import { SearchOutlined, RestOutlined, ClearOutlined } from '@ant-design/icons-vue';

  const $store = useStore();
  const $http = inject('$http');
  const $modal = inject('$modal');
  const $message = inject('$message');

  const logs = ref([]);

  const pagerOption = reactive({
    current: 1,
    pageSize: 20,
    defaultPageSize: 20,
    total: 0
  });
  const so = reactive({
    level: '',
    keywords: ''
  });

  const columns = reactive([
    {
      title: '序号',
      width: 40,
      resizable: false,
      align: 'center',
      customRender: ({ index }) => (pagerOption.current - 1) * pagerOption.pageSize + index + 1
    },
    { title: '记录时间', width: 110, resizable: true, dataIndex: 'CreatedOn' },
    { title: '级别', width: 50, resizable: true, dataIndex: 'LogLevel' },
    { title: '日志信息', width: 300, resizable: true, dataIndex: 'Message' }
  ]);

  const tableHeight = computed(() => {
    return $store.state.area.content.height - 180;
  });

  function getRowKey(record) {
    return 'tr' + record.Code;
  }

  function resizeColumn(w, col) {
    col.width = w;
  }

  function onPaged(pg) {
    let index = 1;

    if (pg && pg.current) {
      index = pg.current;
      pagerOption.pageSize = pg.pageSize;
    }

    let searchObject = {
      pageIndex: index,
      pageSize: pagerOption.pageSize,
      level: so.level,
      keywords: so.keywords
    };

    $http.post('/api/log/logs/search', searchObject).then(res => {
      logs.value = res.datas;

      pagerOption.current = index || 1;
      pagerOption.total = res.total;
    });
  }

  function onReset() {
    so.level = '';
    so.keywords = '';
  }

  function onClear() {
    $modal.confirm({
      title: '提醒',
      content: '是否确定清空所有日志信息？',
      onOk: () => {
        $http.delete(`/api/log/clear`).then(res => {
          if (res.success) {
            $message.success('清空成功！');

            onPaged();
          } else {
            $message.error('出现错误，错误详情：' + res.message);
          }
        });
      }
    });
  }

  onMounted(() => {
    onPaged();
  });
</script>
<style lang="less">
  .logs-card {
    > .ant-card-head > .ant-card-head-wrapper {
      margin-left: -10px;
      margin-right: -10px;
    }
  }
</style>
